<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动物信息表</title>
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<style>
	form{
		width: 50%;
		border-collapse: collapse;
		margin-left: auto;
		margin-right: auto;
	}.avatar-container {
		text-align: center; /* 使头像和上传按钮居中 */
		margin-top: 50px;
    }.avatar {
		width: 150px; /* 设置头像的宽度 */
		height: 150px; /* 设置头像的高度 */
		border-radius: 50%; /* 设置头像为圆形 */
		margin-bottom: 20px; /* 添加一些间距 */
	}
</style>
</head>
<body>
	<div id="app">
	<form class="layui-form"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
	  <div class="avatar-container">
	      <img :src="img" alt="默认头像" class="avatar" id="avatar-preview">
	      <label for="avatar-input" class="layui-btn" >添加头像</label>
	      <input type="file" id="avatar-input" accept="image/*" style="display:none;" @change="onAvatarChange">
	  </div>
	  <div class="layui-form-item">
		<label class="layui-form-label">动物名字</label>
		<div class="layui-input-block">
		  <input type="text" v-model="name" placeholder="请输入" autocomplete="off" class="layui-input">
		</div>
	  </div>
	  <div class="layui-form-item">
	  		<label class="layui-form-label">动物类型</label>
	  		<div class="layui-input-block">
	  		  <input type="text"  v-model="typeId" placeholder="请输入" autocomplete="off" class="layui-input">
	  		</div>
	  </div>
	  <div class="layui-form-item">
	  		<label class="layui-form-label">所在场馆</label>
	  		<div class="layui-input-block">
	  		  <input type="text"  v-model="stadiumId" placeholder="请输入" autocomplete="off" class="layui-input">
	  		</div>
	  </div>
	  <div class="layui-form-item layui-form-text">
		<label class="layui-form-label">备注</label>
		<div class="layui-input-block">
		  <textarea  v-model="remark" placeholder="请输入内容" class="layui-textarea"></textarea>
		</div>
	  </div>
	  <div class="layui-form-item">
		<div class="layui-input-block">
		  <button type="button" @click="doAnimalInsert" class="layui-btn" lay-submit lay-filter="*" >提交添加</button>
		  
		</div>
	  </div>
	  <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
	</form>
	</div>
	<script src="layui/layui.js"></script>
	<script>
	layui.use('form', function(){
	  var form = layui.form;
	  
	  //各种基于事件的操作，下面会有进一步介绍
	});
	</script>
	<script>
	        // 获取上传头像的input元素和头像预览的img元素
	        const avatarInput = document.getElementById('avatar-input');
	        const avatarPreview = document.getElementById('avatar-preview');
	
	        // 监听input元素的change事件
	        avatarInput.addEventListener('change', function(event) {
	            // 获取选中的文件
	            const file = event.target.files[0];
	            // 创建一个FileReader对象
	            const reader = new FileReader();
	            // 读取文件内容
	            reader.readAsDataURL(file);
	            // 监听FileReader对象的load事件
	            reader.addEventListener('load', function() {
	                // 将读取到的文件内容设置为头像预览的src属性
	                avatarPreview.src = reader.result;
	            });
	        });
	    </script>
		
	<script src="js/vue.js" type="text/javascript"></script>
	<script src="js/jquery-3.6.0.min.js" type="text/javascript" ></script>
	<script type="text/javascript">
		
		let vm = new Vue({
			el:"#app",
			data:{
				name:"",
				img:"imgs/default1.png",
				remark:"请输入您的备注",
				typeId:1,
				stadiumId:1
			},
			methods:{
				// 头像改变时的处理函数
				onAvatarChange(event) {
				  const file = event.target.files[0];
				  if (file) {
					this.img = URL.createObjectURL(file); // 创建一个本地URL并更新img属性
				  }
				},
				doAnimalInsert(){
					let url = "http://localhost:8080/animal/insert";
					let params = {
						animalName:this.name,
						animalImg:this.img,
						animalRemark:this.remark,
						animalTypeId:this.typeId,
						stadiumId:this.stadiumId
						
					};
					$.get(url,params,res=>{
						if(res.code==200) {
							//成功
							alert("已添加该动物！");
						} else if(res.code==500){
							alert("操作有误，请检查您输入的信息");
						}
					},"JSON");
				}
			} 
		});
	</script>
</body>
</html>